<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" scrollerY='false' />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->
		<link rel="stylesheet" type="text/css" href="style/style.css" />
		<!--圆环-->
		<script src="../../libs/js/graphical/raphael.js" type="text/javascript"></script>
		<script src="../../libs/js/graphical/progress.js" type="text/javascript"></script>
		<script src="../../libs/thirdparty/highcharts/js/highcharts.js"></script>
		<!--基本选项卡start-->
		<script type="text/javascript" src="../../libs/js/nav/basicTabModern.js"></script>
		<!--基本选项卡end-->
		
		<!--基本选项卡start-->
		<script type="text/javascript" src="../../libs/js/nav/basicTab.js"></script>
		<!--基本选项卡end-->
		<style type="text/css">
			body {
				background: #F2F3F7;
			}
			 #holder ,
			 #holder2 ,
			 #holder3 {
                position: relative;
                width: 200px;
                height: 10px;
                margin: 0px auto;
            }

            .l-panel-pagebar{
				padding-bottom: 40px;
			}
			.tab_content .top>ul li .text{
				float: none;
				margin-top: 5px;
			}
			.tab_content .top>ul li .text p{
				padding: 0;
				text-align: left;
				text-indent: 2em;
				color: #2B2B2B;
			}
			.tab_content .top>ul li{
				background: none;
				border: 1px solid #F6F6F6;
				border-radius: 5px;
			}
			.tab_content .top>ul li>p{
				font-size: 12px;
				color: #FEC310;
				text-align: left;
				text-indent: 2em;
			}
		</style>
	</head>

	<body>
		<div class="page_content">
			<div class="basicTabModern">
				<div name="每日销售概览" style="width:100%;">
					<div class="tab_content" style="display: block;">
						<div class="tab_time">
							<div class="basicTab">
								<div name="今天" style="width:100%;"></div>
								<div name="本月" style="width:100%;"></div>
								<div name="上月" style="width:100%;"></div>
								<div name="最近三月" style="width:100%;"></div>
							</div>
							<div style="float: right;">
								<input type="radio" id="radio" name="radio" value="总销售" checked="checked" /><label for="radio" class="hand">总销售</label>
								<input type="radio" id="radio1" name="radio" value="会员" /><label for="radio1" class="hand">会员</label>
								<input type="radio" id="radio2" name="radio" value="非会员" /><label for="radio2" class="hand">会员</label>
							</div>
							<div class="clear"></div>
						</div>
						<div class="top">
							<ul>
								<li>
									<div class="text">
										<p>销售总额</p>
										<p><span>¥ 23046</span></p>
									</div>
									<div id="holder"></div>
									<p>超出同期¥5000</p>
		
								</li>
								<li>
									<div class="text">
										<p>毛利润</p>
										<p><span>¥ 23046</span></p>
									</div>
									<div id="holder2"></div>
									<p style="color: #7CC422;">超出同期¥5000</p>
								</li>
								<li>
									<div class="text">
										<p>净利润</p>
										<p><span>¥ 23046</span></p>
									</div>
									<div id="holder3"></div>
									<p style="color: #60D0FF;">超出同期¥5000</p>
								</li>
								<div class="clear"></div>
							</ul>
						</div>
						<div class="bottom">
							<div id="container" style="width: 98%; height: 400px; margin: 0 auto"></div>
						</div>
					</div>
				</div>
				<div name="会员储值" style="width:100%;">
					尽请期待
				</div>
				<div name="店员业绩分析" style="width:100%;">
					尽请期待
				</div>
			</div>
		</div>
		<script>
			var rectWidth = 180;
		    var paramBg = {stroke: "#ebf1f7", "stroke-width": 3};
		    var paramYellow = {stroke: "#FEC310", "stroke-width": 3};
		    var paramGreen = {stroke: "#7CC422", "stroke-width": 3};
		    var paramBlue = {stroke: "#60D0FF", "stroke-width": 3};
		    $(function(){
		       	var paper =initPaper("holder", 200, 10);   
		       	var paper2 =initPaper("holder2", 200, 10);   
		       	var paper3 =initPaper("holder3", 200, 10);   
		        drawRectProgress(paper,90,0,100,10,5,rectWidth,paramYellow,paramBg);
		        drawRectProgress(paper2,60,0,100,10,5,rectWidth,paramGreen,paramBg);
		        drawRectProgress(paper3,95,0,100,10,5,rectWidth,paramBlue,paramBg);
		        
		        $('#container').highcharts({
		            chart: {
		                zoomType: 'xy'
		            },
		            title: {
		                text: ''
		            },
		            subtitle: {
						text: document.ontouchstart === undefined ?
		                    '' :
		                    ''
		            },
		            xAxis: [{
		                categories: ['2016/03/07', '2016/03/11', '2016/03/15', '2016/03/19', '2016/03/23', '2016/03/27', '2016/03/31', '2016/04/04', '2016/04/07', '2016/04/12', '2016/04/17', '2016/04/22']
		            }],
		            yAxis: [{ // Primary yAxis
		                labels: {
		                    format: '{value}',
		                    style: {
		                        color: '#89A54E'
		                    }
		                },
		                title: {
		                    text: '',
		                    style: {
		                        color: '#89A54E'
		                    }
		                }
		            }, { // Secondary yAxis
		                title: {
		                    text: ' ',
		                    style: {
		                        color: '#4572A7'
		                    }
		                },
		                labels: {
		                    format: '{value}',
		                    style: {
		                        color: '#fff'
		                    }
		                },
		                opposite: true
		            }],
		            tooltip: {
		                shared: true
		            },
		            legend: {
		                layout: 'vertical',
		                align: 'left',
		                x: 120,
		                verticalAlign: 'left',
		                y: 100,
		                floating: true,
		                backgroundColor: '#FFFFFF'
		            },
		            series: [{
		                name: '毛利润',
		                type: 'line',
		                yAxis: 1,
		                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
		                tooltip: {
		                    valueSuffix: ' '
		                },
		                color:"#FEC107"
		            }, {
		                name: '销售',
		                type: 'line',
		                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
		                tooltip: {
		                    valueSuffix: ''
		                },
		                color:"#86C833"
		            }]
		        });
		    })
		    var fixedObj=100;
			function customHeightSet(contentHeight,contentWidth){
			    $(".tab_content").height(contentHeight-fixedObj);
			}
		</script>
	</body>

</html>